<template>
  <div class="app-container">
<!--    <el-form :inline="true" class="demo-form-inline">-->
<!--      <el-form-item>-->
<!--        <el-input v-model="searchObj.name" placeholder="姓名"/>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-input v-model="searchObj.classs" placeholder="班级"/>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-input v-model="searchObj.major" placeholder="专业"/>-->
<!--      </el-form-item>、-->
<!--      <el-form-item  >-->
<!--        <el-select placeholder="学院" v-model="searchObj.academy">-->
<!--          <el-option-->
<!--            v-for="i in academyList"-->
<!--            :key="i.id"-->
<!--            :label="i.name"-->
<!--            :value="i.id"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="添加时间">-->
<!--        <el-date-picker-->
<!--          v-model="searchObj.begin"-->
<!--          type="datetime"-->
<!--          placeholder="选择开始时间"-->
<!--          value-format="yyyy-MM-dd HH:mm:ss"-->
<!--          default-time="00:00:00"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-date-picker-->
<!--          v-model="searchObj.end"-->
<!--          type="datetime"-->
<!--          placeholder="选择截止时间"-->
<!--          value-format="yyyy-MM-dd HH:mm:ss"-->
<!--          default-time="00:00:00"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>-->
<!--      <el-button type="default" @click="resetData()">清空</el-button>-->
<!--    </el-form>-->
    <el-form>
      <el-form-item label="学院">
        <el-select
          v-model="academyId"
          placeholder="请选择"
      >
          <el-option
            v-for="academy in academyList"
            :key="academy.id"
            :label="academy.name"
            :value="academy.id"
          />
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getAll()">查询</el-button>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="组名" width="180" />
      <el-table-column prop="peopleNumber" label="人数" width="80" />
      <el-table-column prop="academy" label="学院" width="100" />
      <el-table-column prop="intro" label="简介" />
      <el-table-column prop="gmtCreate" label="添加时间" width="160"/>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="openGroup(scope.row.id)">查看</el-button>
          <router-link :to="'/teacherGroup/teacherGroupAdd/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />
    <el-dialog :visible.sync="dialogGroup" title="教师组信息" width="80%">
      <el-button type="primary"@click="openAddTeacher" >
        添加教师
      </el-button>
      <el-table
        :data="groupTeacherList"
        border
        fit
        highlight-current-row
        row-class-name="myClassList">
        <el-table-column prop="name" label="教师">
        </el-table-column>
        <el-table-column label="头衔" width="80">
          <template slot-scope="scope"><!--scope 范围   === 判断类型和值  ==判断值 1 ‘1’  -->
            {{ scope.row.level===1?'高级讲师':'首席讲师' }}
          </template>
        </el-table-column>
        <el-table-column prop="acaname" label="学院">
        </el-table-column>
        <el-table-column prop="career" label="简介">
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">

            <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeteacherById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogGroup = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogAddTeacher" title="添加教师" width="80%">
    <el-form>
      <el-form-item label="教师列表">
        <el-select  v-model="groupAndTeacher.teacherId" placeholder="请选择">
          <el-option
            v-for="i in teaList"
            :key="i.id"
            :label="i.name"
            :value="i.id"
          />

        </el-select>
      </el-form-item>
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddTeacher = false">取 消</el-button>
        <el-button @click="addTeacher">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Academy from "../../../api/edu/Academy";
import teacherGroup from "../../../api/edu/teacherGroup";
import teacher from "../../../api/edu/teacher";
export default {
name: "list",
  data(){
  return {
    teaList:[],
    groupTeacherList:[],
    list: [], // 数据列表
    total: 0, // 总记录数
    page: 1, // 页码
    limit: 8, // 每页记录数
    searchObj: {},// 查询条件
    academyList: [],
    listLoading:false,
    academyId:'',
    dialogGroup:false,
    dialogAddTeacher:false,
    groupAndTeacher:{
      teacherId:'',
      teachergroupId:'',
    },
    currGroup:'',

  }
  },
  created() {
    this.getAcademyList()
    this.getTeacherList()
  },
  methods:{
    removeteacherById(id){
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        return teacherGroup.delete(id).then(res=>{
          this.getTeacherGroupList(this.currGroup)
      }).catch((response) => { // 失败
          if (response === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          } else {
            this.$message({
              type: 'error',
              message: '删除失败'
            })
          }
        })
      })
      },
    getTeacherList(){
      teacher.getListTeacher().then(res=>{
        this.teaList=res.data.teachers
      })
    },
    openAddTeacher(){
      this.dialogAddTeacher=!this.dialogAddTeacher

    },
    addTeacher(){
      teacherGroup.saveTeacherAndGroup(this.groupAndTeacher).then(res=>{
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
        this.getTeacherList()
        this.dialogAddTeacher=false
      })

    },
    getTeacherGroupList(id){
      this.currGroup=id
      teacherGroup.getTeachersById(id).then(res=>{
        this.groupTeacherList=res.data.teacherList
        this.groupTeacherList.forEach(i=>{
          for(let k=0;i<this.academyList;k++) {
            if (i.academy == this.academyList[k].id) {
              i.acaname = this.academyList[k].name
              break
            }
          }
      })
      })
    },
    openGroup(id){
      this.groupAndTeacher.teachergroupId=id
      this.dialogGroup=!this.dialogGroup
      this.getTeacherGroupList(id)
    },
    getAll(){
      teacherGroup.getAllTeacherGroupList(this.academyId).then(res=>{
      this.list=res.data.list
        this.list.forEach(i=>{
          for(let k=0;i<this.academyList;k++){
            if(i.academyId==this.academyList[k].id){
              i.academy=this.academyList[k].name
              break
            }

        }
        })
    })
  },
    getAcademyList(){
      Academy.getAllAcaList().then(res=>{
        this.academyList= res.data.acaList
        this.academyId=this.academyList[0].id

      })
    },
    removeDataById(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        return teacherGroup.deleteTeacherGroup(id)
      }).then(() => {
        this.fetchData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch((response) => { // 失败
        if (response === 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        } else {
          this.$message({
            type: 'error',
            message: '删除失败'
          })
        }
      })
    },
    resetData() {
      this.searchObj = {}
      this.fetchData()
    },
    fetchData(page = 1) { // 调用api层获取数据库中的数据
      this.page = page
      this.listLoading = true
      teacherGroup.getPageList(this.page, this.limit, this.searchObj).then(response => {
        // debugger 设置断点调试
        if (response.success === true) {
          this.list = response.data.rows
          this.total = response.data.total
        }
        this.listLoading = false
      }).catch(error=>{

      })
    }
  }

}
</script>

<style scoped>

</style>
